<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>环境业务栏目 - 浙政钉</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="styles.css">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#1890ff',
                        'gov-blue': '#2563eb',
                        'gov-green': '#059669',
                        'gov-red': '#dc2626'
                    }
                }
            }
        }
    </script>
</head>
<body class="bg-gray-50">
    <div class="min-h-screen">
        <!-- 页面头部 -->
        <header class="bg-white shadow-sm sticky top-0 z-10">
            <div class="flex items-center justify-between p-4">
                <div class="flex items-center space-x-3">
                    <button onclick="goBack()" class="text-gray-600">
                        <i class="fas fa-arrow-left text-lg"></i>
                    </button>
                    <h1 class="text-lg font-semibold text-gray-800">环境业务栏目</h1>
                </div>
                <button class="text-gray-600">
                    <i class="fas fa-search text-lg"></i>
                </button>
            </div>
        </header>

        <div class="p-4">
            <!-- 搜索框 -->
            <div class="mb-6">
                <div class="relative">
                    <input 
                        type="text" 
                        placeholder="搜索法律法规、环境标准、环保知识..." 
                        class="input pl-12 pr-4"
                        id="searchInput"
                        onkeypress="handleSearch(event)"
                    >
                    <i class="fas fa-search absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                    <button 
                        onclick="performSearch()" 
                        class="absolute right-2 top-1/2 transform -translate-y-1/2 btn btn-primary px-3 py-1 text-sm"
                    >
                        搜索
                    </button>
                </div>
            </div>

            <!-- 快速分类 -->
            <div class="mb-6">
                <h3 class="text-base font-semibold text-gray-800 mb-3">快速分类</h3>
                <div class="grid grid-cols-2 gap-3">
                    <div class="card cursor-pointer hover:shadow-md" onclick="selectCategory('environment-management')">
                        <div class="flex items-center space-x-3">
                            <div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center">
                                <i class="fas fa-cogs text-blue-600"></i>
                            </div>
                            <div>
                                <h4 class="font-medium text-gray-800">环境管理</h4>
                                <p class="text-xs text-gray-500">156个文件</p>
                            </div>
                        </div>
                    </div>
                    <div class="card cursor-pointer hover:shadow-md" onclick="selectCategory('laws-regulations')">
                        <div class="flex items-center space-x-3">
                            <div class="w-10 h-10 bg-red-100 rounded-lg flex items-center justify-center">
                                <i class="fas fa-gavel text-red-600"></i>
                            </div>
                            <div>
                                <h4 class="font-medium text-gray-800">法律法规</h4>
                                <p class="text-xs text-gray-500">89个文件</p>
                            </div>
                        </div>
                    </div>
                    <div class="card cursor-pointer hover:shadow-md" onclick="selectCategory('env-standards')">
                        <div class="flex items-center space-x-3">
                            <div class="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center">
                                <i class="fas fa-ruler-combined text-green-600"></i>
                            </div>
                            <div>
                                <h4 class="font-medium text-gray-800">环境标准</h4>
                                <p class="text-xs text-gray-500">234个文件</p>
                            </div>
                        </div>
                    </div>
                    <div class="card cursor-pointer hover:shadow-md" onclick="selectCategory('env-quality')">
                        <div class="flex items-center space-x-3">
                            <div class="w-10 h-10 bg-cyan-100 rounded-lg flex items-center justify-center">
                                <i class="fas fa-chart-line text-cyan-600"></i>
                            </div>
                            <div>
                                <h4 class="font-medium text-gray-800">环境质量</h4>
                                <p class="text-xs text-gray-500">67个文件</p>
                            </div>
                        </div>
                    </div>
                    <div class="card cursor-pointer hover:shadow-md" onclick="selectCategory('env-knowledge')">
                        <div class="flex items-center space-x-3">
                            <div class="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center">
                                <i class="fas fa-graduation-cap text-purple-600"></i>
                            </div>
                            <div>
                                <h4 class="font-medium text-gray-800">环保知识</h4>
                                <p class="text-xs text-gray-500">143个文件</p>
                            </div>
                        </div>
                    </div>
                    <div class="card cursor-pointer hover:shadow-md" onclick="selectCategory('all')">
                        <div class="flex items-center space-x-3">
                            <div class="w-10 h-10 bg-gray-100 rounded-lg flex items-center justify-center">
                                <i class="fas fa-th-large text-gray-600"></i>
                            </div>
                            <div>
                                <h4 class="font-medium text-gray-800">全部文档</h4>
                                <p class="text-xs text-gray-500">689个文件</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 最新文档 -->
            <div class="mb-6">
                <div class="flex items-center justify-between mb-3">
                    <h3 class="text-base font-semibold text-gray-800">最新文档</h3>
                    <a href="#" class="text-gov-blue text-sm">查看更多</a>
                </div>
                <div class="space-y-3" id="documentList">
                    <div class="card">
                        <div class="flex items-start space-x-3">
                            <div class="w-8 h-8 bg-red-100 rounded-lg flex items-center justify-center flex-shrink-0 mt-1">
                                <i class="fas fa-file-pdf text-red-600 text-sm"></i>
                            </div>
                            <div class="flex-1 min-w-0">
                                <h4 class="font-medium text-gray-800 line-clamp-2">《环境保护法》实施条例（2024年修订版）</h4>
                                <div class="flex items-center justify-between mt-2">
                                    <span class="badge badge-danger">法律法规</span>
                                    <div class="flex items-center space-x-3 text-xs text-gray-500">
                                        <span>2024-01-15</span>
                                        <button onclick="downloadFile('env-law-2024.pdf')" class="text-gov-blue">
                                            <i class="fas fa-download"></i> 下载
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="card">
                        <div class="flex items-start space-x-3">
                            <div class="w-8 h-8 bg-green-100 rounded-lg flex items-center justify-center flex-shrink-0 mt-1">
                                <i class="fas fa-file-alt text-green-600 text-sm"></i>
                            </div>
                            <div class="flex-1 min-w-0">
                                <h4 class="font-medium text-gray-800 line-clamp-2">工业企业大气污染物排放标准GB16297-2024</h4>
                                <div class="flex items-center justify-between mt-2">
                                    <span class="badge badge-success">环境标准</span>
                                    <div class="flex items-center space-x-3 text-xs text-gray-500">
                                        <span>2024-01-12</span>
                                        <button onclick="downloadFile('gb16297-2024.pdf')" class="text-gov-blue">
                                            <i class="fas fa-download"></i> 下载
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="card">
                        <div class="flex items-start space-x-3">
                            <div class="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center flex-shrink-0 mt-1">
                                <i class="fas fa-file-word text-blue-600 text-sm"></i>
                            </div>
                            <div class="flex-1 min-w-0">
                                <h4 class="font-medium text-gray-800 line-clamp-2">环境影响评价技术导则 总纲（HJ2.1-2024）</h4>
                                <div class="flex items-center justify-between mt-2">
                                    <span class="badge badge-primary">环境管理</span>
                                    <div class="flex items-center space-x-3 text-xs text-gray-500">
                                        <span>2024-01-10</span>
                                        <button onclick="downloadFile('hj2.1-2024.docx')" class="text-gov-blue">
                                            <i class="fas fa-download"></i> 下载
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="card">
                        <div class="flex items-start space-x-3">
                            <div class="w-8 h-8 bg-purple-100 rounded-lg flex items-center justify-center flex-shrink-0 mt-1">
                                <i class="fas fa-file-powerpoint text-purple-600 text-sm"></i>
                            </div>
                            <div class="flex-1 min-w-0">
                                <h4 class="font-medium text-gray-800 line-clamp-2">大气污染防治基础知识培训课件</h4>
                                <div class="flex items-center justify-between mt-2">
                                    <span class="badge badge-info">环保知识</span>
                                    <div class="flex items-center space-x-3 text-xs text-gray-500">
                                        <span>2024-01-08</span>
                                        <button onclick="downloadFile('air-pollution-training.pptx')" class="text-gov-blue">
                                            <i class="fas fa-download"></i> 下载
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 热门搜索 -->
            <div class="mb-6">
                <h3 class="text-base font-semibold text-gray-800 mb-3">热门搜索</h3>
                <div class="flex flex-wrap gap-2">
                    <span class="bg-white px-3 py-1 rounded-full text-sm text-gray-600 border cursor-pointer hover:border-gov-blue hover:text-gov-blue" onclick="quickSearch('环保法')">环保法</span>
                    <span class="bg-white px-3 py-1 rounded-full text-sm text-gray-600 border cursor-pointer hover:border-gov-blue hover:text-gov-blue" onclick="quickSearch('排放标准')">排放标准</span>
                    <span class="bg-white px-3 py-1 rounded-full text-sm text-gray-600 border cursor-pointer hover:border-gov-blue hover:text-gov-blue" onclick="quickSearch('大气污染')">大气污染</span>
                    <span class="bg-white px-3 py-1 rounded-full text-sm text-gray-600 border cursor-pointer hover:border-gov-blue hover:text-gov-blue" onclick="quickSearch('水污染防治')">水污染防治</span>
                    <span class="bg-white px-3 py-1 rounded-full text-sm text-gray-600 border cursor-pointer hover:border-gov-blue hover:text-gov-blue" onclick="quickSearch('环评导则')">环评导则</span>
                </div>
            </div>

            <!-- 下载记录 -->
            <div class="mb-6">
                <h3 class="text-base font-semibold text-gray-800 mb-3">最近下载</h3>
                <div class="bg-white rounded-lg p-4 space-y-3">
                    <div class="flex items-center justify-between">
                        <div class="flex items-center space-x-3">
                            <i class="fas fa-file-pdf text-red-600"></i>
                            <span class="text-gray-800 text-sm">环境保护法实施条例.pdf</span>
                        </div>
                        <span class="text-xs text-gray-500">今天 14:30</span>
                    </div>
                    <div class="flex items-center justify-between">
                        <div class="flex items-center space-x-3">
                            <i class="fas fa-file-alt text-green-600"></i>
                            <span class="text-gray-800 text-sm">大气污染物排放标准.doc</span>
                        </div>
                        <span class="text-xs text-gray-500">昨天 16:20</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        function goBack() {
            parent.postMessage({type: 'navigate', page: 'home.html'}, '*');
        }

        function handleSearch(event) {
            if (event.key === 'Enter') {
                performSearch();
            }
        }

        function performSearch() {
            const searchInput = document.getElementById('searchInput');
            const query = searchInput.value.trim();
            if (query) {
                // 模拟搜索功能
                showSearchResults(query);
            }
        }

        function quickSearch(keyword) {
            document.getElementById('searchInput').value = keyword;
            showSearchResults(keyword);
        }

        function selectCategory(category) {
            // 模拟分类筛选
            const categoryNames = {
                'environment-management': '环境管理',
                'laws-regulations': '法律法规',
                'env-standards': '环境标准',
                'env-quality': '环境质量',
                'env-knowledge': '环保知识',
                'all': '全部文档'
            };
            
            showCategoryResults(categoryNames[category] || '全部文档');
        }

        function showSearchResults(query) {
            const documentList = document.getElementById('documentList');
            documentList.innerHTML = `
                <div class="text-center py-8">
                    <div class="loading mx-auto mb-4"></div>
                    <p class="text-gray-500">正在搜索"${query}"...</p>
                </div>
            `;
            
            // 模拟搜索延迟
            setTimeout(() => {
                documentList.innerHTML = `
                    <div class="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-4">
                        <p class="text-blue-800 text-sm">
                            <i class="fas fa-info-circle mr-2"></i>
                            搜索"${query}"共找到 12 个相关文档
                        </p>
                    </div>
                    <div class="card">
                        <div class="flex items-start space-x-3">
                            <div class="w-8 h-8 bg-red-100 rounded-lg flex items-center justify-center flex-shrink-0 mt-1">
                                <i class="fas fa-file-pdf text-red-600 text-sm"></i>
                            </div>
                            <div class="flex-1 min-w-0">
                                <h4 class="font-medium text-gray-800">《环境保护法》相关条例汇编</h4>
                                <p class="text-sm text-gray-500 mt-1">包含环境保护的基本原则、监督管理制度等内容...</p>
                                <div class="flex items-center justify-between mt-2">
                                    <span class="badge badge-danger">法律法规</span>
                                    <button onclick="downloadFile('env-law-collection.pdf')" class="text-gov-blue text-sm">
                                        <i class="fas fa-download"></i> 下载
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                `;
            }, 1000);
        }

        function showCategoryResults(category) {
            const documentList = document.getElementById('documentList');
            documentList.innerHTML = `
                <div class="text-center py-8">
                    <div class="loading mx-auto mb-4"></div>
                    <p class="text-gray-500">正在加载${category}...</p>
                </div>
            `;
            
            setTimeout(() => {
                documentList.innerHTML = `
                    <div class="bg-green-50 border border-green-200 rounded-lg p-4 mb-4">
                        <p class="text-green-800 text-sm">
                            <i class="fas fa-folder-open mr-2"></i>
                            ${category} - 共有 56 个文档
                        </p>
                    </div>
                    <div class="space-y-3">
                        <div class="card">
                            <div class="flex items-start space-x-3">
                                <div class="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center flex-shrink-0 mt-1">
                                    <i class="fas fa-file-alt text-blue-600 text-sm"></i>
                                </div>
                                <div class="flex-1">
                                    <h4 class="font-medium text-gray-800">${category}相关文档1</h4>
                                    <div class="flex items-center justify-between mt-2">
                                        <span class="badge badge-primary">${category}</span>
                                        <button onclick="downloadFile('doc1.pdf')" class="text-gov-blue text-sm">
                                            <i class="fas fa-download"></i> 下载
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                `;
            }, 800);
        }

        function downloadFile(filename) {
            // 模拟文件下载
            const notification = document.createElement('div');
            notification.className = 'fixed top-4 left-4 right-4 bg-green-500 text-white p-3 rounded-lg shadow-lg z-50';
            notification.innerHTML = `
                <div class="flex items-center">
                    <i class="fas fa-check-circle mr-2"></i>
                    <span>文件 "${filename}" 下载成功</span>
                </div>
            `;
            document.body.appendChild(notification);
            
            setTimeout(() => {
                notification.remove();
            }, 3000);
        }
    </script>
</body>
</html>